<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        canvas{
            display: block;
            border: 1px solid #ccc;
            margin: 5px auto;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas">
    </canvas>
    <script>
        // canvas的动画思想：清屏、更新、渲染，重新画
        var canvas = document.getElementById("myCanvas")
        // 获取上下文
        var ctx = canvas.getContext("2d")
        // 画布的尺寸
        canvas.width = document.documentElement.clientWidth - 10
        canvas.height = document.documentElement.clientHeight

        // 球类
        function Ball(x, y, r){
            this.x = parseInt(Math.random() * canvas.width)
            this.y = parseInt(Math.random() * canvas.height)
            this.r = 10
            this.color = 'gray'
            // 设置行进方向
            this.dx = parseInt(Math.random() * 10) - 5
            // 设置行进方向
            this.dy = parseInt(Math.random() * 10) - 5

            ballArr.push(this)
            // 小球的位置在数组中记录一下
            this.index = ballArr.length - 1
        }

        // 更新小球
        Ball.prototype.update = function(){
            // 小球的运动
            this.x += this.dx
            this.y += this.dy
            // 当小球出屏幕反弹，小于this.r即小球出屏幕
            if(this.x < this.r || this.x > canvas.width - this.r){
                this.dx = -this.dx 
            }
            if(this.y < this.r || this.y > canvas.height - this.r){
                this.dy = -this.dy
            }

        }

         // 渲染小球
         Ball.prototype.render = function(){
            ctx.beginPath()
            ctx.globalAlpha = 1

            ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false)
            ctx.fillStyle = this.color
            ctx.fill()

            // 画线的逻辑
            // 画线只画比自己大的，使得每次只有一根线
            for(var i = this.index; i< ballArr.length; i++){
                if(Math.abs(ballArr[i].x - this.x) < 150 && Math.abs(ballArr[i].y - this.y) < 150){
                    ctx.strokeStyle = "#000"
                    ctx.beginPath()
                    // 根据两个小球的距离来设置线的透明度
                    ctx.globalAlpha= 10 / Math.sqrt(Math.pow(ballArr[i].x - this.x, 2) + Math.pow(ballArr[i].y - this.y, 2))
                    ctx.moveTo(this.x, this.y)
                    ctx.lineTo(ballArr[i].x, ballArr[i].y)
                    ctx.closePath()
                    ctx.stroke()
                }
            }
        }

        // 维护小球的数组
        var ballArr = []

        // 创建20个小球
        for (var i = 0; i < 20; i++){
            new Ball()
        }

        // 定时器进行动画渲染和更新
        setInterval(function(){
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            for(var i = 0; i < ballArr.length; i++){
                // 小球的更新和渲染
                ballArr[i].update()
                // if(ballArr[i]){
                ballArr[i].render()
                // } 
            }
        },10) 
    </script>
</body>
</html>